<fieldset class="layui-elem-field layui-field-title">
  <legend>添加商品</legend>
</fieldset>
<style type="text/css">
	#demo2 img{
		width: 92px;
		height: 92px;		
	}
	#demo2 span{
		position: relative;
	}
	#demo2 span:hover::after{
		content:"x";
		display: block;
		background-color: #FF5722;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		position: absolute;
		line-height: 16px;
		color: #fff;
		text-align: center;
		top: -40px;
		right: 0px;
	}
</style>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text"  name="name" class="layui-input" placeholder="请输入商品名"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">一级分类</label>
		<div class="layui-input-inline">
			<select name="parent" lay-filter="parent"></select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">二级分类</label>
		<div class="layui-input-inline">
			<select name="goodsSortId"></select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">描述</label>
		<div class="layui-input-inline">
			<input type="text"  name="dscp" class="layui-input" placeholder="描述一下你的商品吧！"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">价格</label>
		<div class="layui-input-inline">
			<input type="number"  name="price" class="layui-input" placeholder="输入商品价格"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">型号</label>
		<div class="layui-input-inline">
			<input type="text"  name="version" class="layui-input" placeholder="型号"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">颜色</label>
		<div class="layui-input-inline">
			<input type="text"  name="color" class="layui-input" placeholder="输入颜色"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">照片</label>
		<div class="layui-input-inline">
			<!-- 使用layui的上传图片的插件 -->
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; width: 300px;">
			    
			    <div class="layui-upload-list" id="demo2"></div>
			 </blockquote>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">数量</label>
		<div class="layui-input-inline">
			<input type="number"  name="count" class="layui-input" placeholder="数量"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" 
				lay-submit lay-filter="add">添加分类</button>
		</div>	
</form>
<script type="text/javascript">
	layui.use(['form','upload','element'],function(){
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		var $ = layui.$;
		//获取当前的token,在请求时添加到请求头中
		var token = getCookie("token");
		
		//获取一级分类
		 $.ajax({
			//headers:{token:token},//请求时将我们的token添加到请求头中
			url:'http://localhost:9000/api/goodsSorts',
			type:'get',
			data:{},
			dataType:'json',
			success:function(data){
				if(data.status == 200){
					var html = "<option value=''>请选择父分类</option>";
					$.each(data.data.list,function(index,item){
						html += "<option value='"+item.id+"'>"+item.name+"</option>";
					});
					$("select[name='parent']").html(html);
					form.render();
				}else{
					layer.alert(data.msg,function(){
						window.location.href="login.html"; 
					});
					
				}
			},
			error:function(){
				
			}
		}); 
		form.on('select(parent)',function(data){
			var parent = data.value; 
			if(parent > 0){
				$.ajax({
					url:'http://localhost:9000/api/goodsSorts',
					type:'get',
					data:{parent:parent},
					dataType:'json',
					success:function(data){
						var html = "<option value=''>请选择二级分类</option>";
						$.each(data.data.list,function(index,item){
							html += "<option value='"+item.id+"'>"+item.name+"</option>"
						});
						$("select[name='goodsSortId']").html(html);
						form.render();
					},
					error:function(){
						
					}
				});	
			}
		});
		 //多图片上传
		   upload.render({
		     elem: '#test2'
		     ,url: 'http://127.0.0.1:9000/api/upload' //此处配置你自己的上传接口即可
		     ,multiple: true
		     ,done: function(res){
		       //上传完毕 没上传一张图片，都会响应一次
			   $('#demo2').append('<span><img src="http://127.0.0.1:9000/upload/'+ res.data +'"class="layui-upload-img">'+
						'<input type="hidden" name="pictures" value="'+res.data+'" /></span>')
			  /* var picture=res.data
			   pictures.push({name:picture}) */
		     }
		   });
		   
		   //添加图片点击事件  
		   $("#demo2").on("click","span",function(){
				$(this).remove();
		   });
		  
		   
		   form.on('submit(add)',function(data){
			   /* data.field.goodsPictures=pictures */
			   //获取所有图片组成一个数组
			   var pictures = [];
			   $("input[name='pictures']").each(function(){
				   pictures.push({ name:$(this).val() });
			   });
			   
			   data.field.pictures = pictures;
			  $.ajax({
				  url:'http://127.0.0.1:9000/api/goods',
				  type:'post',
				  data:JSON.stringify(data.field),
				  contentType:'application/json; charset=utf-8',
				  dataType:'json',
				  success:function(data){
					  if(data.status == 201){
						  gotoUrl("goods/list.html");
					  }else{
						  layer.msg(data.msg);
					  }
				  },
				  error:function(){
					  
				  }
			  });
			  
			  return false;
		  }); 
		  
		  function gotoUrl(url){
		  	if(url == undefined){
		  		alert("没有链接");
		  		return;
		  	}
		  	// 使用Ajax请求url
		  	$.ajax({
		  		url: url,
		  		type: 'get',
		  		data: {},
		  		dataType: 'html',
		  		success:function(data){
		  			$(".layui-body>div").html(data);
		  		},
		  		error:function(){
		  			
		  		}
		  	});
		  }		 
	});
	
</script>


